<template>
    <el-row>
        <el-col :span="13">
            <el-card>
                <el-button type="primary" style="margin: 10px;">添加</el-button>
                <el-table :data="projectList" stripe style="width: 100%">
                    <el-table-column prop="historyId" label="ID" width="50px" />
                    <el-table-column prop="carId" label="车辆ID" width="80px" />
                    <el-table-column prop="carPlate" label="车牌号" width="90px" />
                    <el-table-column prop="parkId" label="停车场ID" width="90px" />
                    <el-table-column prop="parkName" label="停车场名称" width="160px" />
                    <el-table-column label="操作">
                        <template #default="scope">

                            <el-popover placement="right" :width="400" trigger="hover">
                                <template #reference>
                                    <el-button size="small" type="success"
                                        @click="showSetHistoryDialog(scope.row.parkId)">分配车辆</el-button>
                                </template>
                                <el-table :data="scope.row.cars">
                                    <el-table-column width="100" property="carPlate" label="车牌号" />
                                    <el-table-column width="300" property="carType" label="车辆类型" />
                                    <el-table-column width="300" property="carState" label="车辆状态" />
                                    <el-table-column width="300" property="inTime" label="入库时间" />
                                    <el-table-column width="300" property="outTime" label="出库时间" />
                                    <el-table-column width="300" property="parkFee" label="停车费" />
                                    <el-table-column width="300" property="parkId" label="停车场ID" />
                                    <el-table-column width="300" property="carAvatar" label="address" />
                                </el-table>
                            </el-popover>


                            <el-button size="small" type="primary">修改</el-button>
                            <el-popconfirm title="确认删除该停车场？" confirm-button-text="确认" cancel-button-text="取消"
                                width="200px">
                                <template #reference>
                                    <el-button size="small" type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>
    <!-- 分配车辆对话框开始 -->
    <el-dialog v-model="DialogShow1" title="添加停车场" width="700">
        <el-transfer v-model="selectedCarId" :data="allCar" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="DialogShow1 = false">取消</el-button>
                <el-button type="primary" @click="matchCar">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 分配车辆对话框结束 -->

</template>

<script setup>
import parklotApi from '@/api/parklotApi';
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { ElLoading } from 'element-plus'
import historyApi from '@/api/historyApi';
//存放所有项目的数组
const projectList = ref([]);
//初始化:对话框是否弹出
const DialogShow1 = ref(false);
//初始化：所有在库车辆的信息
const allCar = ref([]);
//初始化：被选中的车辆的ID
const selectedCarId = ref([]);
//初始化:需要分配的停车场ID
const selectedParkId = ref(0);

//定义方法：查询所有项目的信息
function selectAll() {
    historyApi.selectAll()
        .then(resp => {
            //成功的回调
            projectList.value = resp.data;
        });
}
//定义方法：查询所有在库车辆并且显示分配车辆的对话框
function showSetHistoryDialog(parkId) {
    //查询所有在库车辆记录
    historyApi.allCar(parkId)
        .then(resp => {
            allCar.value = resp.data.allCar;
            selectedCarId.value = resp.data.selectedCarId;
            selectedParkId.value = parkId;
            //弹出对话框
            DialogShow1.value = true;
        });
}
//定义方法：分配员工
function matchCar() {
    historyApi.match(selectedParkId.value, selectedCarId.value)
        .then(resp => {
            ElMessage.success(resp.msg);
            DialogShow1.value = false;
        });
}
selectAll();
</script>

<style scoped></style>